@keyframes change {
  0%{background:#F5F5F5;}
  100%{background:red;}
}
body{
  background:#F5F5F5}
.xy-m{
  position: relative;
  width:100%;
  height: 430px;
  overflow: hidden;
  img{
    position: absolute;
    //left:-20%;
}
}
.xy-mm{ 
  margin-top: 50px;
  height: 773px;
  .nav-tabs{
    border:none;
  }
  .xy-m-m{
    display: flex;
    justify-content: center;
    li {
      width: 120px;
      text-align: center;
      margin:0 40px;
      a{
        margin:0;
        background: none;
        border:none;

        span{color: black;
          font-size: 18px;
          display: inline-block;
          width: 100px;
          text-align: center;
        }

        span{
          background: none;
          border:none;
        }
      }
      a:focus{
        background: red;
        border:none;
      }
      a:hover{
        border:none;
        animation-duration: 2s;
        animation-name:change;

        //background: red;
      }
    }
    li.active{
      background: red;
    }
  }
}

//.nav-tabs{li{a{border-rudias:none}}}


.xy-f{
  overflow: hidden;
  li{
    width: 402px;
    height: 300px;
    display: inline-block;
    padding:10px 10px 0;

    a img{
      -webkit-transition: all .6s;
      -moz-transition: all .6s;
      -ms-transition: all .6s;
      -o-transition: all .6s;
      transition: all .6s;
    }
    a:hover{
      img{
        display: block;
        transform:translateX(-10px) ;
      }
    }

    img{
      width: 392px;
      height: 255px;
    }
    .thumbnail{
      border:none;
    }
  }
}
